<template>
    <div class="index">
        <!-- <group>
            <cell is-link title="Simple" link="sence"></cell>
            <cell is-link title="Switch icons" link="sence/detail/123"></cell>
        </group> -->
        
        <!-- <div class="tab-item"><router-link to="sence">tab</router-link></div>
        <div class="tab-item"><router-link to="sence/detail/123">found</router-link></div>
        <div class="tab-item"><router-link to="/my">my</router-link></div> -->
        <!-- <transition :name="direction === 'forward' ? 'slide-left' : 'slide-right'"> -->
            <!-- <keep-alive> -->
                <router-view class="router-view main"></router-view>
            <!-- </keep-alive> -->
        <!-- </transition> -->
        
        <tabbar>
            <tabbar-item :selected="$route.path === '/main/home'" link="/main/home" append="false">
                <img slot="icon-active" src="../common/images/home_active.png">
                <img slot="icon" src="../common/images/home.png">
                <span slot="label">首页</span>
            </tabbar-item>
            <tabbar-item :selected="$route.path === '/main/found'" link="/main/found">
                <img slot="icon-active" src="../common/images/found_active.png">
                <img slot="icon" src="../common/images/found.png">
                <span slot="label">发现</span>
            </tabbar-item>
            <tabbar-item :selected="$route.path === '/main/my'" show-dot link="/main/my">
                <img slot="icon-active" src="../common/images/my_active.png">
                <img slot="icon" src="../common/images/my.png">
                <span slot="label">我的</span>
            </tabbar-item>
        </tabbar>
        <loading v-model="isloading"></loading>    
    </div>
        
</template>

<script>
    import { Tabbar, TabbarItem, Group, Cell, Loading } from 'vux';
    import { mapState } from 'vuex';
    export default {
        data () {
            return {
                sel: 0,
                transitionName: 'slide-right'
            };
        },
        components: {
            Group,
            Cell,
            TabbarItem,
            Tabbar,
            Loading
        },
        computed: {
            ...mapState({
                isloading: state => state.isLoading,
                direction: state => state.direction
            }),
            selectTabbar (selected) {
                console.log(selected);
                let index = 0;
                let url = '';
                let urlName = '';
                let active = selected ? '_active' : '';
                switch (index) {
                    case 0:
                    urlName = 'home';
                    break;
                    case 1:
                    urlName = 'found';
                    break;
                    case 2:
                    urlName = 'my';
                    break;
                    default:
                    urlName = 'home';
                    break;
                };
                url = `./common/images/${urlName + active}.png`;
                return url;
            }
        },
        watch: {
            $route (to, from) {
                const toDepth = to.name;
                // console.log(to.name);
                // console.log(from.name);
                const fromDepth = from.name;
                this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left';
            }
        }
    };
</script>

<style lang="less">
    .index{
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
        width: 100%;
        .main{

        }
        
    }
</style>
